//不同样式可点击文本
<template>
	<view class="bg">
		<text 
		:class="['textx']"
		:style="{'color':item.color}"
		v-for="(item,index) in datas" :key="index"
		@click="click(item.text)">{{item.text}}</text>
	</view>
</template>

<script>
	export default {
		name:"v-labels",
		props:{
			text: {
			  type:String,
			  default:'',
			},
			color: {
			  type:String,
			  default:'#E5F3FF',
			},
			fontSize: {
			  type:Number,
			  default:26,
			},
			styles: {
			  type:Array,
			  default:undefined,
			}
		},
		
		data() {
			return {
				styled:{},
				datas:[]
			};
		},
		created() {
			this.initData();
		},
		
		methods: {
			
			initData() {
				
				if (this.styles == undefined) {
					this.datas = [{'text':this.text, 'color':this.color, 'fontSize':'fontSize'}];
					return;
				}
				
				var styled = {};
				for (var i = 0; i < this.styles.length; i++) {
					var style = this.styles[i];
					if (style.text && style.text.length) {
						styled[style.text] = style;
					}
				}
				this.styled = styled;
				
				var indexPaths = this.getTypeIndexPaths();
				indexPaths = this.typeFilter(indexPaths);
				var datas = [];
				for (var i = 0; i < indexPaths.length; i++) {
					var path = indexPaths[i];
					var str = this.text.substring(path.index, path.index + path.length);
					var style = this.styled[str];
					var map = {};
					map.color = style && style.color ? style.color : this.color;
					map.fontSize = style && style.fontSize ? style.fontSize : this.fontSize;
					map.text = str;
					datas.push(map)
				}
				this.datas = datas;
			},
			
			//获取样式位置
			getTypeIndexPaths() {
				
				var indexPaths = [];
				for (var key in this.styled) {
					var i = 0;
					while (this.text.indexOf(key, i) != -1){
						var index  = this.text.indexOf(key, i);
						indexPaths.push({'index':index, 'length':key.length});
						i = index + 1;
					}
				}
				
				indexPaths.sort(function(a, b) {
					return a.index > b.index;
				})
				return indexPaths;
			},
			
			//样式过滤-过滤重叠样式，补充空白样式
			typeFilter(indexPaths) {
				
				var paths = [];
				var map;
				for (var i = 0; i < indexPaths.length; i++) {
					var path = indexPaths[i];
					
					//第一个样式
					if (map == undefined) {
						path.index != 0 && paths.push({'index':0, 'length':path.index});
						paths.push(path);
					} 
					//重叠
					else if (path.index < map.index+map.length && 
							 path.length > map.length) {
								 
						paths.splice(-1, 1, path);
						var data = paths[paths.length-2];
						data.length = path.index - data.index;
					} else if (path.index > map.index+map.length) {
						
						var index = map.index+map.length;
						var length = path.index - index;
						paths.push({'index':index, 'length':length});
						paths.push(path);
					} else if (path.index == map.index+map.length) {
						paths.push(path);
					} 
					
					if (i == indexPaths.length - 1) {
						var data = paths[paths.length-1];
						var index = data.index+data.length;
						var length = this.text.length - index;
						length && paths.push({'index':index, 'length':length});
					}
					map = path;
				}
				paths = paths.length ? paths : [{'index':0, 'length':this.text.length}];
				return paths;
			},
			
			/********************************** 点击*/
			//点击
			click(text) {
				this.$emit('click', text);
			}
		}
	}
</script>

<style src="@/_css/style.css" ></style>
<style scoped>
	.bg {
	}
	.textx {
		display: inline-block;
	}
</style>
